import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import connect from './connect';

// 引入图片
import swiper1 from '../../assets/images/ia_100000010.png'
import swiper2 from '../../assets/images/ia_100000011.png'
import swiper3 from '../../assets/images/ia_100000012.jpg'
import swiper4 from '../../assets/images/ia_100000013.jpg'
import swiper5 from '../../assets/images/ia_100000014.png'

@connect
@withRouter
class index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [swiper1, swiper2, swiper3, swiper4, swiper5],
      imgHeight: 190,
    }
  }
  // componentDidMount() {
  //   this.props.initSwiper()
  // }
  render() {
    // console.log(this.state.data)
    return (
      <Carousel
        autoplay={true}
        infinite={true}
        style={{ width: '100%' }}
      >
        {/* 固定数据版 */}
        {
          this.state.data.map((item, index) => (
            <img
              key={'swiper-' + index}
              src={item}
              alt=""
              style={{ display: 'block', width: '100%', height: '100%', verticalAlign: 'top' }}
              // 搭配withRouter高阶组件得到路由对象
              onClick={() => {
                console.log(this.props.history);
                // 点击轮播图片跳转到对应的详情
                // this.props.history.push('/detail/' + item.id)
              }}
            />
          ))
        }
      </Carousel>
    );
  }
}

export default index;

/*
其他组件使用说明：
// 引入轮播图
import Swiper from '@/components/Swiper';
<Swiper />
*/





/*
{
  // mock网络请求版
  // 条件判断
  this.props.swiper.length > 0
    ?
    this.props.swiper.map(item => (
      <img
        key={'swiper-' + item.id}
        src={item.img}
        alt=""
        style={{ width: '100%', verticalAlign: 'top' }}
        // 搭配withRouter高阶组件得到路由对象
        onClick={() => {
          console.log(this.props.history);
          // 点击轮播图片跳转到对应的详情
          // this.props.history.push('/detail/' + item.id)
        }}
      />
    ))
    :
    // 没数据的话放个默认的
    <img src={swiper1} alt="" style={{ width: '100%', verticalAlign: 'top' }} />
}
*/




